<template>
  <div style="height:900px;">
    
    <vxe-grid
          border
          resizable
          height="auto"
          :loading="loading"
          :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
          :pager-config="tablePage"
          :columns="tableColumn"
          :data="tableData"
          @page-change="handlePageChange">
    </vxe-grid>


  </div>
</template>

<script>
export default {
  name: 'grid',
  data () {
    return {
     loading: false,
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'right',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      tableColumn: [
        { type: 'seq', width: 60 },
        { type: 'checkbox', width: 50 },
        { field: 'foodName', title: '食品名称' },
        { field: 'imagePath', title: '图片' },
        { field: 'stateName', title: '状态' },
        { field: 'price', title: '价格', showOverflow: true }
      ],
      tableData: []

    }
  },
  created () {
    this.findList()
  },
  methods: {
    findList () {
      
      var _this = this;
      _this.loading = true
      _this.$axios({
          method: 'post',
          url: 'http://127.0.0.1:8888/shop/food/test',
          data: _this.$qs.stringify(
            {
              pageNum:_this.tablePage.currentPage,
              pageSize:_this.tablePage.pageSize
            }
          )
      })
      .then(function (response) {
           let result = response.data;
           if(result){
             _this.tableData = result.rows;
              _this.tablePage.total = result.total;
              
           }
           _this.loading = false;
      })
      .catch(function (error) {
        console.log(error);
          _this.loading = false
      });
      
      _this.loading = false
      // XEAjax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData).then(({ page, result }) => {
      //   this.tableData = result
      //   this.tablePage.totalResult = page.totalResult
      //   this.loading = false
      // }).catch(e => {
      //   this.loading = false
      // })
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.findList()
    },
    searchEvent () {
      this.tablePage.currentPage = 1
      this.findList()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
